<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <title>Document</title>
    <style>
        .loginContainer{
            margin: 0 auto;
            width: 600px;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 50px;
            border: 1px solid;
        }
        .loginContainer.hidden{
            display: none;
        }
        .loginContainer input{
            margin-bottom: 20px;
        }
        .loginStyle{
            width: 160px;
            height: 40px;
            background: rgb(50,203,77);
            color: white;
            font-size: 17px;
        }
        .inputStyle{
            width: 200px;
            height: 30px;
            padding: 5px;
            outline: none;
        }

        .inputStyle:focus{
            border: 1px solid rgb(50,203,77);
        }
        form{
            position: relative;
        }
        .exchange{
            position: absolute;
            top:8px;
            right: 65px;
            color: red;
        }
        .img{
            width: 100px;
            height: 100px;
        }

        .content{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .content.hidden{
            display: none;
        }
        .content figure{
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="loginContainer">
    <h1>登录</h1>
    <form action="/checkUser" enctype="application/x-www-form-urlencoded" method="post" onsubmit="return false;" >姓名：
        <input class="inputStyle" id="username" type="text" name="username" /><br />密码：
        <input class="inputStyle" id="pwd" type="password" name="pwd" /><br />
        <input class="loginStyle" id="sub" type="submit" value="登录" />
        <!--<button class="btn">点击我请求需要认证的api第一个</button>-->

    </form>
    <input type="file" name="file">
    <button class="upload-img">上传头像</button>
    <img src="" class="img" alt="">
</div>
<div class="content hidden">
    <figure onclick="login()"><img src="http://placehold.it/100x100/.png" alt=""></figure>
    <figcaption>点击头像登录</figcaption>
</div>
</body>
<script>
    // 单点登录
    function isLogin() {
        const coookie = document.cookie.split('=')[1]
        if ( coookie ) {
            $('.content').classList.remove('hidden')
            $('.loginContainer').classList.add('hidden')
        }
    }
    isLogin()

    function signOn() {

    }
    function $( el ) {
        return document.querySelector( el )
    }
    function login(){
        let username = $('#username').value;
        let pwd = $('#pwd').value;
        const loginReg = {
            username: '姓名不能为空',
            pwd: '密码不能为空'
        }
        const coookie = document.cookie.split('=')[1]
        if ( !coookie ) {
            for ( let val  in loginReg ) {
                if (!$('#' + val).value) {
                    alert(loginReg[val])
                    return
                }
            }
        }

        const xhr = new XMLHttpRequest();
        xhr.open('post','open/api/blog/login', true);

        xhr.onload = function () {
            // 接收token 作离线存储；
            console.log(xhr.responseText);
            const { status, message, data:{ token, uid} } = JSON.parse(xhr.responseText);
            const userinfo = {
                token,
                uid
            }
            localStorage.setItem('token',token);
            localStorage.setItem('uid',uid);
            localStorage.setItem('userinfo',JSON.stringify(userinfo));
            console.log(status)
            if ( !status ) {
                location.href = 'index.html'
            }
        }
        xhr.setRequestHeader('content-type','application/json');
        let data = JSON.stringify({
            username: username,
            pwd: pwd
        })
        xhr.send( data );
    }
    // 登录按钮
    $(".loginStyle").onclick = login
    // $('.btn').addEventListener('click', () =>{
    //     const token = localStorage.getItem('token')
    //     if ( token ) {
    //         const xhr = new XMLHttpRequest();
    //         xhr.open('get','/api/blog/user', true);
    //         xhr.setRequestHeader('authorization','Bearer '+ token)
    //         xhr.onload = function () {
    //             console.log(xhr.resoponseText)
    //         }
    //         xhr.send();
    //     }
    // })

    $('.upload-img').addEventListener('click', ()=> {
        const file = $('input[name=file]').files[0]
        const formData = new FormData();
        formData.append('photo',file);
        const xhr = new XMLHttpRequest;
        console.log(file)
        xhr.open('post', '/api/blog/uploadPicture', true)
        xhr.setRequestHeader('authorization','Bearer ' + localStorage.getItem('token'));
        // xhr.setRequestHeader('content-type','application/multipart/form-data')
        xhr.onload = function () {
            console.log(xhr.responseText)
            const { msg, status, data} = JSON.parse( xhr.responseText );
            // console.log(data)
            $('.img').setAttribute('src',data)
        }
        xhr.send(formData)
    })


</script>
</html>